<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget palette Dojo DataGrid tests (Legacy)</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget palette Dojo DataGrid tests (Legacy)</h1>
	
	<h2 class="test_section">Introduction</h2>
	<p> With the addition of GridX support, Maqetta support for DataGrid has been deprecated. As part of the 
	deprecation, DataGrid has been hidden within the widget palette. However, existing files containing
	DataGrid should continue to function, and DataGrid Smart Input should continue to behave as before. So, this
	DataGrid test plan stays mostly the same except instead of dragging DataGrid from palette to canvas, DataGrid
	will need to be added to HTML files via the source editor.
	
	<h2 class="test_section">Creating File Containing Data Grid</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps" >
		<li>Choose New HTML File from the New menu</li>
		<li>Click "Split Vertically" or "Split Horizontally" in main toolbar to make source pane visible</li>
		<li>Copy and paste the source from <a href="./support_files/dataGridLegacySample.html">dataGridLegacySample.html</a> on top of the source in the source pane</li>
		<li> See DataGrid get rendered and close source pane (e.g., click "Display Design" in main toolbar).</li>
	</ol>
	
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The DataGrid should be rendered in the page editor with default data.</li>
	</ol>
	
	
	<h2 class="test_section">Comma separated data</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps" >
		<li>Continuing with HTML file created in last section.</li>
		<li>Double-click on the DataGrid to bring up SmartInput.</li>
		<li>SmartInput is displayed chose <i>Comma separated data</i> from the drop down list</li>
		<li>Change the data in the text area to: </li>
		<ul>
			<li >one, two, three </li>
			<li >data 1, data 2, data 3</li>
			<li >xxxx, yyy, zzz </li>
			<li >111, 222, 3333 </li>
		</ul>
		<li>Click in the canvas area of the window to cause a blur event that will close the window.</li>
		<li>The DataGrid should be updated with the data you entered.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the data grid should be displayed with the data entered</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The DataGrid in page editor and preview should be displaying the data you just enter.</li>
		<li>You should see 3 columns with the headers one, two and three.</li>
		<li>You should see 3 rows of data, corresponding to the data you entered.</li>
	</ol>
	<h2 class="test_section">Smart Input</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Add DataGrid to file using instructions in <i>Creating File Containing Data Grid</i> section above</li>
		<li>Double-click on the DataGrid to bring up SmartInput.</li>
		<li>SmartInput is displayed, mouse down and hold on the icon in the button right corner of the text area. Drag to re-size the the smart input.</li>
		<li>Click on the <b>?</b> icon to display the help.</li>
		<li>Click on the <b>?</b> icon to hide the help.</li>
		<li>Mouse down and hold in the area between the <b>?</b> icon and the Ok and Cancel buttons. drag the smart input box around the canvas area.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The user should be able to re-size the smart input box, move the box around the canvas, 
		display and hide help. When the user moves the smart input box the pointer should disappear 
		from the top left of the smart input box..</li>
	</ol>
	<h2 class="test_section">HTML detection in comma separated data</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Add DataGrid to file using instructions in <i>Creating File Containing Data Grid</i> section above</li>
		<li>Double-click on the DataGrid to bring up SmartInput.</li>
		<li>SmartInput is displayed chose <i>Comma separated data</i> from the drop down list</li>
		<li>Change the data in the text area to:</li>
		<ul>
			<li>one, two, three </li>
			<li>data 1, &lt;b&gt;data 2&lt;/b&gt;, data 3</li>
			<li>xxxx, yyy, zzz </li>
			<li>111, 222, 3333 </li>
		</ul>
		<li>Two radio buttons should now be displayed <i>Plan Text and HTML Markup</i>, Chose the <i>HTML Markup</i> radio.</li>
		<li>Click the <i>Cancel</i> button.</li>
		<li>The DataGrid should be be displayed with the default data, not the data you entered.</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the data grid should be displayed with the default data.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The DataGrid in page editor and preview should be displaying the default data.</li>
	</ol>
	<img height="138" src="images/image01.jpg" width="309">
	<h2 class="test_section">Data file from workspace</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Add DataGrid to file using instructions in <i>Creating File Containing Data Grid</i> section above</li>
		<li>Double-click on the DataGrid to bring up SmartInput.</li>
		<li>SmartInput is displayed chose <i>Data file from workspace</i> from the drop down list</li>
		<li>Click on the folder icon.</li>
		<li>The select a source dialog will be displayed, navigate to the <i>sample_data folder</i>and then select the <i>htmlSample.json<</i> file. Click the OK button</li>
		<li>The text area should now display the text <i>sample_data/htmlSample.json</i>. 
		Two radio button should also now be displayed under the text area labeled <i>Plain text</i> and <i>HTML markup<</i> 
		select the <i>Plain text</i></li>
		<li>Click the ok button.</li>
		<li>The DataGrid should be updated with the data from the htmlSample file. Notice that the data is displayed as plan text, for example &lt;b&gt;Fruits&lt;/b&gt;</li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the data grid should be displayed with the data from the file.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>The DataGrid in page editor and preview should be displaying the data from the file.</li>
	</ol>
	<img height="177" src="images/image03.jpg" width="306">
	<h2 class="test_section">Data from URL (JSONP)</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps" >
		<li>Continuing from the test case above, open the HTML File from the <i>Data from workspace<</i> test case.</li>
		<li>Double click on the DataGrid Widget in the design view to display the smart input.</li>
		<li>SmartInput is displayed chose <i>Data from URL (JSONP)</i> from the drop down list</li>
		<li>In the text area enter the url <i>http://maqettaservice.appspot.com/sampleservice</i> Two radio button should also now be displayed under the text area labeled 
		<i>Plain text</i> and <i>HTML markup</i> select the <i>HTML markup</i></li>
		<li>Click the ok button.</li>
		<li>The DataGrid should be updated with the data from the service. Notice that the data is displayed as supports html mrkup , for example <b>Fruits</b></li>
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar, this should open a new browser window and the data grid should be displayed with the data from the service.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults" >
		<li>The DataGrid in page editor and preview should be displaying the data from the file. </li>
	</ol>
	<img height="149" src="images/image00.jpg" width="301">

</body>
</html>
